<template>
  <view class="container">
	   <view class="content" >
		   <!-- 页面头部 -->
		   <!-- 列表部分 -->
		   <view class="list">
		     <!-- 循环渲染列表项 -->
		     <view v-for="item in data" :key="item.id" class="list-item">
		       <!-- 列表项头部，点击可展开或收起详情 -->
		       <view class="item-header" @click="toggleExpand(item.id)">
		         <view class="item-title">
		           <!-- 供应商姓名 -->
		           <text class="title-text">供应商姓名：{{ item.providerName }}</text>
		           <!-- 批次号 -->
		           <text class="title-subtext">批次号：{{ item.lotNumber }}</text>
		         </view>
		       </view>
		   
		       <!-- 列表项详情，展开时显示 -->
		       <view v-if="item.expanded" class="item-details">
		         <!-- 循环渲染子项卡片 -->
		         <view class="detail-card" v-for="child in item.children" :key="child.id" @click="goDetails(child.id)">
		           <!-- 卡片头部 -->
		             <!-- 物料名称 -->
		             <text class="card-title">物料名称: {{ child.materialName }}</text><br>
		             <!-- 方案合格率 -->
		             <text class="card-subtitle">方案合格率: {{ child.passRate }}%</text><br>
		             <!-- 总检验数量 -->
		             <text class="content-text">总检验数量: {{ child.quantity }}{{child.unitName}}</text><br>
					 <text class="content-text">检验结果: <text :style="{ color: getColor1(child.result) }">{{ getResult(child.result)}}</text></text><br>
		             <!-- 操作员 -->
		             <text class="content-text">操作员: {{ child.nickName1 }}</text><br>
					 <button @click.stop="getStandard(child.typeId)">查看指标</button>
		         </view>
		       </view>
		     </view>
		   </view>
	   </view>
  </view>
</template>

<script>	
export default {
  data() {
    return {
      data: [], // 初始化为空数组
      userId: undefined,
    };
  },
  created() {
    // 获取用户ID
    const storedInfo = uni.getStorageSync('userIdInfo');
    this.userId = storedInfo.userId;
	this.getData();
	
  },
  methods: {
	  getResult(id){
		  switch (id) {
			  case 0:
				  return "合格";
			  case 1:
				  return "不合格";
			  case 2:
			  	  return "待确认";
			  case 3:
			  	  return "待质检";  
			  default:
				  return "未知状态";
		  }
	  },
	  getColor1(status) {
	    // 根据状态返回对应的颜色
	    switch (status) {
	      case 0:
	        return '#71C671';
		  case 1:
			return '#FF0000';
	      case 2:
	        return '#00BFFF';
	      case 3:
	        return '#FFF68F';
	      default:
	        return '#8E8E8E';
	    }
	  },
	goDetails(id){
		uni.navigateTo({
			url:'/pages/matirialQualityPlan/addDetails?id='+id,
		})
	},
	getData() {
	  uni.request({
	    url: 'http://127.0.0.1:1005/MaterialQuality/findAllMesMaterialQualityInspectionScheme',
	    method: 'GET',
	    data: {
	      workerId: this.userId // 假设this.userId已经定义
	    },
	    success: (res) => {
	      const result = res.data;
	      // 检查返回的数据结构
	      if (result.code === 200 && Array.isArray(result.data)) {
	        this.data = result.data.map(item => ({
	          ...item,
	          expanded: false, // 添加 expanded 属性
	        }));
	      } else {
	        console.error('Unexpected data format:', result);
	      }
	    },
	    fail: (error) => {
	      console.error('Error fetching data:', error);
	    }
	  });
	},
    toggleExpand(id) {
      // 显示原料质检明细
      this.data = this.data.map((item) => {
        if (item.id === id) {
          item.expanded = !item.expanded;
        }
        return item;
      });
    },
	getStandard(id){
		console.log(id);
		uni.navigateTo({
			url:'/pages/matirialQualityStandard/index?id='+id
		})
	}
  },
};
</script>

<style>
/* 页面样式 */
page {
  background-color: #f9f9f9; /* 调整页面背景色 */
}

.container {
  padding: 30rpx; /* 增加容器内边距 */
}

.header{
	width: auto;
	height: 50px;
}
.content{
	width: auto;
	height: auto;
	margin-top: 10px;
}

.list {
  margin-top: 0;
}

.list-item {
  background-color: #ffffff;
  border-radius: 16rpx; /* 增加列表项圆角 */
  margin-bottom: 30rpx;
  box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.1); /* 增强列表项阴影效果 */
  overflow: hidden;
  transition: all 0.3s ease;
}

.list-item:hover {
  transform: translateY(-3rpx); /* 鼠标悬停时列表项上移 */
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15); /* 鼠标悬停时增强阴影效果 */
}

.list-item:last-child {
  margin-bottom: 0;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28rpx;
  border-bottom: 1rpx solid #eaeaea;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.item-header:hover {
  background-color: #f5f8ff; /* 鼠标悬停时列表项头部背景色变浅蓝 */
}

.item-title {
  display: flex;
  flex-direction: column;
}

.title-text {
  font-size: 18px; /* 增大供应商姓名字体大小 */
  font-weight: bold;
  color: #333333;
}

.title-subtext {
  font-size: 16px;
  color: #666666;
  margin-top: 10rpx;
}

.item-details {
  padding: 24rpx;
  background-color: #f9f9f9; /* 调整详情部分背景色 */
  transition: all 0.3s ease;
}

.detail-card {
  background-color: #ffffff;
  border-radius: 12rpx; /* 增加卡片圆角 */
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08); /* 调整卡片阴影效果 */
  transition: transform 0.3s ease;
  line-height: 30px;
}

.detail-card:hover {
  transform: scale(1.02); /* 鼠标悬停时卡片放大 */
}

.detail-card:last-child {
  margin-bottom: 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14rpx;
}

.card-title {
  font-size: 16px; /* 增大物料名称字体大小 */
  font-weight: bold;
  color: #333333;
}

.card-subtitle {
  font-size: 16px;
  color: #007aff; /* 方案合格率文字颜色改为蓝色 */
}

.card-content {
  display: flex;
  justify-content: space-between;
}

.content-text {
  font-size: 14px;
  color: #666666;
}
</style>
